<style>
    .ly-collection-item {
        display: flex;
    }

    .ly-collection {
        position: relative;;
    }

    .ly-collection-title-bg {
        width: 100%;
        height: 40px;
    }

    .ly-collection-border .ly-collection-title-bg {
        background: #f5f7fa;
    }

    .ly-collection-title {
        font-size: 14px;
        line-height: 40px;
    }

    .ly-collection-content {
        margin-top: -40px;
        border-bottom: none;
    }

    .ly-collection-border .ly-collection-content {
        border: 1px solid #efefef;
        border-bottom: none;
    }

    .ly-collection-item-content {
        padding: 10px;
        padding-left: 0;

    }

    .ly-collection-item-action .el-button+.el-button{
        margin-left: 7px;
    }

    .ly-collection-border .ly-collection-item-content {
        border-bottom: 1px solid #efefef;
    }

    .ly-collection-title {
        padding: 0 10px;
    }

    .ly-collection-item-action {
        display: flex;
        align-items: flex-end;
        flex: 1;
    }

    .ly-collection-line .ly-collection-item-content {
        padding-top: 0;
    }

    .ly-collection-column0 .ly-collection-title {
        padding-left: 0;
    }

    .ly-collection-column0 .ly-collection-item-content {
        padding-left: 0;
    }

    .ly-collection-border .ly-collection-column0 .ly-collection-title {
        padding-left: 10px;
    }

    .ly-collection-border .ly-collection-column0 .ly-collection-item-content {
        padding-left: 10px;
    }

    .ly-collection-action {
        margin-top: 10px;
    }

    .ly-collection-border .ly-collection-action {
        margin-left: 10px;
    }

</style>
<template>
    <div class="ly-collection" :class="{'ly-collection-border':border,'ly-collection-line':line}">
        <div style="display: none;" ref="header_hidden">
            <slot>
            </slot>
        </div>
        <div class="ly-collection-title-bg"></div>
        <div class="ly-collection-content" style="">
            <div v-for="(item,index) in value" :key="item.name" class="ly-collection-item">
                <div v-for="(column,i) in columns" :class="['ly-collection-column'+i]">
                    <div v-show="index==0||line" class="ly-collection-title"> {{column.label}}</div>
                    <ly-collection-content
                            class="ly-collection-item-content" :column="column" :row="item" :index="index">
                    </ly-collection-content>
                </div>
                <div class="ly-collection-item-content ly-collection-item-action" v-if="!disabled">
                    <el-button v-show="value.length>min" @click="move(index,index-1)" type="text">上移</el-button>
                    <el-button v-show="value.length>min" @click="move(index,index+1)" type="text">下移</el-button>
                    <el-button v-show="value.length>min" @click="remove(index)" type="text">删除</el-button>
                </div>
            </div>
        </div>
        <div class="ly-collection-action" style="" v-if="!disabled">
            <el-button @click="add" type="primary">{{addText}}</el-button>
        </div>
    </div>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-collection',
            props: {
                'value': {
                    'default': []
                }, min: {
                    'default': 1
                }, max: {
                    'default': 2
                },
                'maxMessage': {
                    'default': ''
                },
                addText: {
                    'default': '添加一组'
                },
                addMethod:{
                    'type':Function,
                    'default':function () {
                        return {};
                    }
                },
                line: Boolean,
                border: Boolean,
                disabled: {
                    'type':Boolean,
                    'default':false
                }
            }, watch: {
                value: function (value) {
                    if (value.length < this.min) {
                        for (var i = 0; i < this.min - value.length; i++) {
                            this.add();
                        }
                    }
                }
            }, data: function () {
                return {
                    tableId: 1,
                    columns: []
                };
            }, created: function () {
                if (!this.value) {
                    this.$emit('input', []);
                } else {
                    if (this.value.length < this.min) {
                        for (var i = 0; i < this.min - this.value.length; i++) {
                            this.add();
                        }
                    }
                }
            }, destroyed: function () {

            }, methods: {
                add: function () {
                    if (this.value.length < this.max) {
                        var value={};
                        if(this.addMethod){
                            value= this.addMethod();
                        }
                        if(value){
                            this.value.push(value);
                        }
                    } else {
                        if (!this.maxMessage) {
                            this.$message({type: 'warning', message: '最多添加' + this.max + '组数据'});
                        } else {
                            this.$message({type: 'warning', message: this.maxMessage});
                        }

                    }
                }, move: function (from, to) {
                    if (to < 0 || to > this.value.length) {
                        return;
                    }
                    var temp = this.value[to];
                    Vue.set(this.value, to, this.value[from]);
                    Vue.set(this.value, from, temp);
                }, remove: function (index) {
                    if (this.value.length > this.min) {
                        this.value.splice(index, 1);
                    }
                }, addColumn: function (column) {
                    this.columns.push(column)
                }
            }
        }
    });
</script>


